<template>
	<view class="login-page">
		<view class="circle"></view>
		<view class="app_title">万能管理系统</view>
		<view class="u-form">
			<view class="u-demo-block">
				<text class="u-demo-block__title">用户名</text>
				<view class="u-demo-block__content">
					<u--input placeholder="请输入用户名" border="bottom" clearable v-model="form.username" @confirm="handleLogin"></u--input>
				</view>
			</view>
			<view class="u-demo-block">
				<text class="u-demo-block__title">密码</text>
				<view class="u-demo-block__content">
					<u--input placeholder="请输入密码" border="bottom" type="password" clearable v-model="form.pass" @confirm="handleLogin">
					</u--input>
				</view>
			</view>
		</view>
		<view class="login-btn">
			<u-button type="primary" text="登 录" :disabled="loading" @click="handleLogin"></u-button>
		</view>
	</view>
</template>

<script>
	import _ from "lodash"
	import store from "@/store/index.js"
	import md5 from "js-md5"
	import {
		doLogin
	} from "@/api"
	export default {
		data() {
			return {
				loading: false,
				form: {
					username: "",
					pass: ""
				}
			}
		},
		onShow() {
			const token = uni.getStorageSync("token") || ''
			const isLogin = uni.getStorageSync("isLogin") || false
			if (token || isLogin) {
				uni.reLaunch({
					url: '/pages/system/system'
				})
			}
		},
		methods: {
			async handleLogin() {
				if (!_.trim(this.form.username)) {
					return uni.showToast({
						title: "请输入用户名",
						icon: 'error'
					})
				}
				if (!_.trim(this.form.pass)) {
					return uni.showToast({
						title: "请输入密码",
						icon: 'error'
					})
				}
				this.loading = true
				uni.showLoading({
					title: '登录中'
				})
				try {
					const model = {
						...this.form,
						pass: md5(this.form.pass)
					}
					const res = await doLogin(model)
					if (res.State == 1) {
						const {
							Data
						} = res
						store.commit("login", Data[0])
					} else {
						uni.showToast({
							title: res.Msg,
							icon: "error"
						})
					}
				} catch (e) {
					//TODO handle the exception
				} finally {
					this.loading = false
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-page {
		padding: 32rpx;
		position: relative;
	}

	.circle {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		background-color: $u-primary;
		top: -100rpx;
		right: -100rpx;
	}

	.u-demo-block {
		margin-bottom: 40rpx;
	}

	.u-demo-block__title {
		font-size: 28rpx;
		color: #8f9ca2;
		margin-bottom: 16rpx;
		display: flex;
		flex-direction: row;
	}

	.login-btn {
		margin-top: 124rpx;
	}

	.u-form {
		margin-top: 120rpx;
	}

	.app_title {
		font-size: 48rpx;
		color: rgba(16, 16, 16, 1);
		text-align: center;
		margin-top: 68rpx;
	}
</style>
